<template>
  <view class="content" :style="{backgroundImage:`url(${bgImg?bgImg:defaultBg})`}">
    <div class="btn">
      <u-button class="custom-style" text="扫码点单" @click="jump" />
    </div>
  </view>
</template>

<script>
import { option } from "@dcloudio/vue-cli-plugin-uni/packages/postcss/tags";
import { getQrcodeMsg, getQrcodeBg } from "@/service/api/platformCode";
export default {
  data() {
    return {
      qrMsg: "",
      codePath: "",
      bgImg: "",
      defaultBg:"https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/img/platform/platform_childBg.png",
    };
  },
  onLoad(options) {
    if (options && options.q) {
      this.getQrcodeMsg(options.q)
    }
    this.getBgImg()
  },
  methods: {
    // 解析二维码信息
    getQrcodeMsg(qrMsg) {
      const q = decodeURIComponent(qrMsg);
      this.codePath = qrMsg;
      let codeNo = q.split("/")[q.split("/").length - 1];
      getQrcodeMsg({ codeNo })
        .then((result) => {
          this.qrMsg = result;
        })
        .catch((error) => {
          uni.showModal({
            title: "温馨提示",
            content: error,
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                this.$Router.push({
                  path: "/pages/index/index",
                });
              }
            },
          });
        });
    },
    // 跳转到外部小程序
    jump() {
      let {qrMsg:{appId},codePath} = this;
      uni.navigateToMiniProgram({
        appId,
        path: `pages/index/main?q=${codePath}`,
        envVersion: "release",
      });
    },
    // 获取背景图片
    getBgImg() {
      getQrcodeBg().then((res) => {
        this.bgImg = res
      })
    },
  },
};
</script>

<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  .btn {
    margin-bottom: 10vh;
    min-width: 200px;
    button {
      background-color: #ffb72f;
      color: #fff;
      border: none;
    }
  }
}
</style>
